<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .aClass{
      color: red;
    }
    .bClass{
      color: blue;
    }
    .cClass{
      font-size: 40px;
    }
  </style>
</head>
<body>
<div id="app">
  <h2>1.class绑定：:class='xxx'</h2>
  <p class="cClass" :class="a">xxx是字符串</p>
  <p :class="{aClass: isA, bClass: isB}">xxx是对象</p>
  <p :class="['aClass','aClass']">xxx是数组</p>

  <h2>2.style绑定</h2>
  <p :style="{color: activeColor, fontSize: fontSize+'px'}">
    :style="{color: activeColor, fontSize: fontSize+'px'}"
  </p>

  <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../../js/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      a: 'aClass',
      isA: true,
      isB: false,
      activeColor: 'red',
      fontSize: 20
    },
    methods: {
      update() {
        this.a = 'bClass'
        this.isA = false
        this.isB = true
        this.activeColor = 'green'
        this.fontSize = 30
      }
    }
  })
</script>
</body>
</html>